<template>
  <div id="Pressure" style="width: 100%; height:100%;"></div>
</template>

<script>
export default {
  name: "PressureChart",
  data(){
    return{
      //
      option: {
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%'
        },
        series: [
          {
            name: 'Pressure',
            type: 'gauge',
            progress: {
              show: true
            },
            title: {
              offsetCenter: [0,"100%"],
              fontSize: 13,
            },
            axisLine: {             // 仪表盘轴线(轮廓线)相关配置。
              show: true,             // 是否显示仪表盘轴线(轮廓线),默认 true。
              // lineStyle: {            // 仪表盘轴线样式。
              //   color: [[0.2, 'rgba(105,35,43,0.26)'], [0.8, 'rgba(87,91,24,0.43)'], [1, 'rgba(16,197,40,0.32)']],  //仪表盘的轴线可以被分成不同颜色的多段。每段的  结束位置(范围是[0,1]) 和  颜色  可以通过一个数组来表示。默认取值：[[0.2, '#91c7ae'], [0.8, '#63869e'], [1, '#c23531']]
              //   opacity: 1,                 //图形透明度。支持从 0 到 1 的数字，为 0 时不绘制该图形。
              //   width: 30,                  //轴线宽度,默认 30。
              //   shadowBlur: 20,             //(发光效果)图形阴影的模糊大小。该属性配合 shadowColor,shadowOffsetX, shadowOffsetY 一起设置图形的阴影效果。
              //   shadowColor: "#fff",        //阴影颜色。支持的格式同color。
              // }
            },
            detail: {
              valueAnimation: true,
              formatter: '{value}',
              fontSize: 26,
            },
            axisLabel: {            // 刻度标签。
              show: false,             // 是否显示标签,默认 true。
              distance: 10,            // 标签与刻度线的距离,默认 5。
              color: "#05215d",          // 文字的颜色,默认 #fff。
              fontSize: 0,           // 文字的字体大小,默认 5。
              formatter: "{value}",   // 刻度标签的内容格式器，支持字符串模板和回调函数两种形式。 示例:// 使用字符串模板，模板变量为刻度默认标签 {value},如:formatter: '{value} kg'; // 使用函数模板，函数参数分别为刻度数值,如formatter: function (value) {return value + 'km/h';}
            },
            data: [
              {
                value: 70,
                name: '全库(167843)/查询总数(105465)'
              }
            ]
          }
        ]
      },
    }
  },
  mounted() {
    this.drawChart();
  },
  created(){

  },
  methods:{
    drawChart(){
      let chart = this.$echarts.init(document.getElementById("Pressure"));
      chart.setOption(this.option);
    }
  }
}
</script>

<style scoped>

</style>
